<template>
    <div class="cascaderflex">
        <div class="label11" v-if="label">{{ label }}</div>
        <el-cascader :style="{ width: innerWidth ? '100%' : '200px' }" ref="cityCascader" :props="optionProps"
            :disabled="disabled" v-model="modeldata" placeholder="请选择省市县" @change="cityChange" />
    </div>
</template>

<script setup>
import { ref } from "vue"
import { shengCode } from '@/api/home.js'
import { watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useUserStore } from "@/store/user";

const userStore = useUserStore()
const cityCascader = ref("null")
const props = defineProps({
    areaCode: {
        type: Array,
        default: []
    },
    checkStrictly: {
        type: Boolean,
        default: true
    },
    innerWidth: {
        type: Boolean,
        default: false
    },
    label: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
})
const emit = defineEmits(['cityChange', "update:areaCode"])
let modeldata = ref(props.areaCode);
onMounted(() => {
    modeldata.value = props.areaCode 
})
watch(() => props.areaCode, (newval, oldval) => {
    modeldata.value = newval
}, { deep: true })

const cityChange = (val) => {
    emit("update:areaCode", modeldata.value);
    emit('cityChange', val)
}


const optionProps = {
    lazy: true,
    checkStrictly: props.checkStrictly,
    lazyLoad(node, resolve) {
        let result = [];
        let params = {
            code: "330000",
        };
        const { level } = node
        if (level == 0) {
            shengCode(params).then(res => {
                res.data.forEach((d) => {
                    let obj = {
                        label: d.name,
                        value: d.code,
                        value2: d.code,
                    };
                    result.push(obj);
                });
                result.unshift({ label: '浙江省', leaf: true, value: '330000' })
                // if (allBaseUrl.VITE_TEST == "localhost" || allBaseUrl.VITE_TEST == "浙路通生产包") {
                //     result.unshift({ label: '浙江省', leaf: true, value: '330000' })
                // }
                resolve(result);
            })
        } else if (level == 1) {
            params = {
                code: node.data.value2,
            };
            shengCode(params).then((res) => {
                res.data.forEach((d) => {
                    let obj = {
                        label: d.name,
                        value: d.code,
                        value2: d.code,
                        leaf: false,
                    };
                    result.push(obj);
                });
                resolve(result);
            })
        } else {
            params = {
                code: node.data.value2,
            };
            shengCode(params).then((res) => {
                res.data.forEach((d) => {
                    let obj = {
                        label: d.name,
                        value: d.code,
                        value2: d.code,
                        leaf: true,
                    };
                    result.push(obj);
                });
                resolve(result);
            })
        }

    },
}

onBeforeUnmount(() => {
    bus.off('mapCityChange')
})
defineExpose({
    // resetModel,
    // cityCascader
})

</script>

<style lang="less" scoped>
:deep(.el-cascader) {
    width: 100%;

}

// .cascaderClass {
//     width: 100% !important;
// }

.cascaderflex {
    display: flex;
    align-items: center;

    .label11 {
        color: #4c5768;
        margin: auto 0;
        font-size: 16px;
        font-weight: 400;
        min-width: 50px;
        text-align: right;
        align-items: center;
    }
}



// :deep(.el-input__inner){
//     background-color: #22344F;
// }
// :deep(.el-input__wrapper){
//     background-color: #22344F;
// }</style>